<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ plugin.displayName || plugin.name }}</h5>
    @if (!justInstalled) {
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="closeModal()"
      [disabled]="saveInProgress"
    ></button>
    }
  </div>
  <div class="modal-body">
    @if (loading) {
    <div class="text-center primary-text">
      <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
    </div>
    } @if (!loading) {
    <div class="text-center">
      <img [src]="plugin.icon" (error)="handleIconError()" alt="Plugin Icon" class="mb-3 plugin-icon-card" />
    </div>
    <ul class="mb-3">
      <li [innerHTML]="'child_bridge.about' | translate: { link: linkChildBridges }"></li>
      @if (configBlocks.length) {
      <li>{{ 'child_bridge.bridges_paired' | translate }}</li>
      @if (configBlocks.length === 1 && !deviceInfo.get(configBlocks[0]._bridge?.username) && originalBridges.length ===
      0) {
      <li>{{ 'child_bridge.bridges_paired_2' | translate }}</li>
      } }
    </ul>
    @if (canConfigure && configBlocks.length) { @if (configBlocks.length > 1) {
    <ul class="list-group list-group-box mb-0">
      <li class="list-group-item text-center grey-text small">{{ 'form.label.changes_kept' | translate }}</li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label for="bridgeSelect" class="mb-2 mb-md-0 w-100 w-md-50"> {{ 'accessories.plugin' | translate }} </label>
        <div class="text-start text-md-end w-100 w-md-50">
          <select
            class="custom-select"
            id="bridgeSelect"
            [(ngModel)]="selectedBlock"
            (change)="onBlockChange(selectedBlock)"
          >
            @for (block of configBlocks; track block; let i = $index) {
            <option [value]="i">{{ block.name || block.platform || block.accessory }}</option>
            }
          </select>
        </div>
      </li>
    </ul>
    }
    <!-- CHILD BRIDGE SECTION -->
    <ul class="list-group list-group-box mt-3 mb-0">
      <!-- Link Bridge Option -->
      @if (!configBlocks[selectedBlock]._bridge?.username && bridgesAvailableForLink.length && !currentBridgeHasLinks) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label for="bridgeLink" class="mb-2 mb-md-0 w-100 w-md-50"
          >{{ 'child_bridge.config.or_link' | translate }}</label
        >
        <div class="text-start text-md-end w-100 w-md-50">
          <select
            class="custom-select"
            id="bridgeLink"
            #bridgeLinkSelect
            (change)="onLinkBridgeChange(bridgeLinkSelect.value)"
          >
            <option [value]="">{{ 'child_bridge.config.select_existing' | translate }}</option>
            @for (bridge of bridgesAvailableForLink; track bridge) {
            <option [value]="bridge.username">
              @if (bridge.name) { {{ bridge.name }} &middot; {{ bridge.username }} } @else { {{ bridge.username }} }
            </option>
            }
          </select>
        </div>
      </li>
      }

      <!-- Child Bridge Toggle -->
      @if (currentBridgeHasLinks) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">Child Bridge</label>
        <div class="text-start text-md-end w-100 w-md-50 grey-text">
          {{ 'child_bridge.config.prevent' | translate }}
        </div>
      </li>
      } @if (!currentBridgeHasLinks) {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">
          {{ (currentlySelectedLink ? 'child_bridge.config.or_link' : 'child_bridge.config.use') | translate }}
        </span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            [id]="'toggleExternalBridgeInput_' + selectedBlock"
            (change)="toggleExternalBridge(configBlocks[selectedBlock], enabledBlocks[selectedBlock], selectedBlock)"
            [(ngModel)]="enabledBlocks[selectedBlock]"
          />
          <label [for]="'toggleExternalBridgeInput_' + selectedBlock" class="rendux-label"></label>
        </div>
      </li>
      } @if (currentlySelectedLink) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.name' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50 grey-text font-monospace">
          {{ currentlySelectedLink.name }}
        </div>
      </li>
      }

      <!-- Username Display (shown for both linked and enabled bridges) -->
      @if ((currentlySelectedLink || configBlocks[selectedBlock]._bridge?.username) && (currentlySelectedLink ||
      !currentBridgeHasLinks)) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'users.label_username' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50 grey-text font-monospace">
          {{ currentlySelectedLink?.username || configBlocks[selectedBlock]._bridge?.username }}
        </div>
      </li>
      } @if (currentlySelectedLink) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.port' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50 grey-text font-monospace">
          {{ currentlySelectedLink.port }}
        </div>
      </li>
      }

      <!-- Name Field (shown only for enabled bridges, not linked) -->
      @if (!currentlySelectedLink && configBlocks[selectedBlock]._bridge?.username) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.name' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.name"
            [ngClass]="{ 'is-invalid': getHapNameValidationError(selectedBlock) }"
          />
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.manufacturer' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input"
            [placeholder]="'form.optional' | translate"
            [(ngModel)]="configBlocks[selectedBlock]._bridge['manufacturer']"
          />
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.model' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input"
            [placeholder]="'form.optional' | translate"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.model"
          />
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.firmware' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input"
            [ngClass]="{ 'font-monospace': configBlocks[selectedBlock]._bridge.firmwareRevision }"
            [placeholder]="'form.optional' | translate"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.firmwareRevision"
          />
        </div>
      </li>
      @if (!justInstalled) {
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">
          {{ 'settings.startup.scheduled_restart' | translate }}
          <span class="badge badge-primary ms-1">{{ 'common.labels.beta' | translate }}</span><br />
          <small
            class="grey-text"
            [innerHtml]="'settings.startup.scheduled_restart_desc' | translate: { link: linkCron }"
          ></small>
        </label>
        <div class="text-start text-md-end w-100 w-md-50 d-flex flex-column align-items-end">
          <input
            type="text"
            class="form-control custom-input font-monospace"
            placeholder="mm hh dd MM ww"
            [value]="getScheduledRestartCron(configBlocks[selectedBlock]._bridge?.username)"
            (input)="onScheduledRestartCronChange($event.target.value, configBlocks[selectedBlock]._bridge?.username)"
            [style.letter-spacing]="'0.15em'"
            [style.text-align]="'center'"
            maxlength="30"
          />
        </div>
      </li>
      @if (canShowBridgeDebug) {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'child_bridge.config.debug' | translate }} <code>-D</code></span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            [id]="'homebridgeDebugMode_' + selectedBlock"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.debugModeEnabled"
            [attr.aria-label]="'settings.startup.debug' | translate"
          />
          <label [for]="'homebridgeDebugMode_' + selectedBlock" class="rendux-label"></label>
        </div>
      </li>
      }
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">
          <span class="font-monospace">DEBUG</span><br />
          <small
            class="grey-text"
            [innerHTML]="'settings.service.debug_tooltip' | translate: { link: linkDebug }"
          ></small>
        </label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input font-monospace"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.env.DEBUG"
            placeholder="HAP-NodeJS:Advertiser,HAP-NodeJS:Service"
          />
        </div>
      </li>
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">
          <span class="font-monospace">NODE_OPTIONS</span><br />
          <small class="grey-text">{{ 'settings.service.node_tooltip' | translate }}</small>
        </label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="text"
            class="form-control custom-input font-monospace"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.env.NODE_OPTIONS"
            placeholder="--max-old-space-size=512 --max-http-header-size=8192"
          />
        </div>
      </li>
      } }
    </ul>

    <!-- HOMEKIT (HAP) SECTION - Only shown when child bridge is enabled -->
    @if (!currentlySelectedLink && configBlocks[selectedBlock]._bridge?.username) {
    <ul class="list-group list-group-box mt-3 mb-0">
      <!-- HAP Header with Always-On Toggle -->
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start"> <i class="fas fa-xl fa-hap me-2 my-2"></i> HAP </span>
      </li>

      <!-- HAP QR Code -->
      @if (configBlocks[selectedBlock]._bridge?.username &&
      deviceInfo.get(configBlocks[selectedBlock]._bridge?.username) === false) {
      <li class="list-group-item text-center">
        <div class="w-100 d-flex flex-column text-center">
          <div class="mx-auto d-flex align-items-center justify-content-center qr-code-placeholder primary-text p-3">
            <div>
              <div class="text-center grey-text">
                <i class="fas fa-qrcode fa-2x mb-2 primary-text"></i>
              </div>
              <div class="text-center small grey-text">{{ 'child_bridge.return_to_pair' | translate }}</div>
            </div>
          </div>
        </div>
      </li>
      } @if (deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)) {
      <li class="list-group-item text-center">
        <div class="w-100 d-flex flex-column text-center">
          <app-qrcode
            [data]="deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_setupCode']"
            class="mx-auto"
            style="width: 175px; height: 175px"
          />
          <p class="mx-auto mt-3 mb-1 font-monospace">
            {{ deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['pincode'] }}
          </p>
          <p class="grey-text mx-auto small mb-1" style="max-width: 400px">
            <i
              class="fas fa-link"
              [ngClass]="{
                'green-text': deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_isPaired'],
                'grey-text': !deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_isPaired']
              }"
            ></i>
            {{ (deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_isPaired'] ? 'status.widget.qr_paired'
            : 'status.widget.qr_unpaired') | translate }} @if
            (!deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_isPaired']) {
            <span> &middot; {{ 'status.code_scan' | translate }} </span>
            }
          </p>
        </div>
      </li>
      @if (!deviceInfo.get(configBlocks[selectedBlock]._bridge?.username)?.['_isPaired']) {
      <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
        <span class="text-start">{{ 'child_bridge.config.hide_pairing_alert' | translate }}</span>
        <div class="text-end grey-text d-flex align-items-center">
          <input
            type="checkbox"
            class="rendux-input"
            [id]="'toggleHideHapUnpairing_' + selectedBlock"
            [checked]="isUnpairingHidden(configBlocks[selectedBlock]._bridge?.username)"
            (change)="toggleHideUnpairing(configBlocks[selectedBlock]._bridge?.username)"
            [attr.aria-label]="'child_bridge.config.hide_pairing_alert' | translate"
          />
          <label [for]="'toggleHideHapUnpairing_' + selectedBlock" class="rendux-label"></label>
        </div>
      </li>
      } }

      <!-- HAP Configuration Fields -->
      <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
        <label class="mb-2 mb-md-0 w-100 w-md-50">{{ 'child_bridge.config.port' | translate }}</label>
        <div class="text-start text-md-end w-100 w-md-50">
          <input
            type="number"
            class="form-control custom-input font-monospace"
            [(ngModel)]="configBlocks[selectedBlock]._bridge.port"
            [ngClass]="{ 'is-invalid': getHapPortValidationError(selectedBlock) }"
            min="1025"
            max="65533"
          />
        </div>
      </li>
    </ul>
    } } @if (deleteBridges.length) {
    <ngb-alert type="error" [dismissible]="false" class="mt-3 mb-0">
      <p>
        {{ 'child_bridge.confirm_delete_1' | translate }} @if (deletingPairedBridge) { {{
        'child_bridge.confirm_delete_2' | translate }} }
      </p>
      <div class="text-center">
        <ul class="d-inline-block text-start mb-0">
          @for (bridge of deleteBridges; track bridge) {
          <li>
            <i class="fas fa-lg fa-hap me-1"></i>
            {{ bridge.bridgeName || deviceInfo.get(bridge.id)?.['displayName'] }}
            <span class="grey-text"> &middot; </span>
            <span class="grey-text font-monospace">{{ bridge.id }}</span>
          </li>
          }
        </ul>
      </div>
    </ngb-alert>
    } @if (!configBlocks.length && canConfigure) {
    <ngb-alert type="info" [dismissible]="false">{{ 'child_bridge.must_configure_plugin' | translate }}</ngb-alert>
    } @if (!canConfigure) {
    <ngb-alert type="info" class="mb-0" [dismissible]="false">
      <div class="mb-3">
        {{ 'plugins.settings.message_manual_config_required' | translate }} {{
        'plugins.settings.message_consult_documentation' | translate }}
      </div>
      <button class="btn btn-primary mb-0" (click)="openFullConfigEditor()">
        {{ 'plugins.settings.label_open_config_editor' | translate }}
      </button>
    </ngb-alert>
    } }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      @if (canConfigure && !justInstalled) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="closeModal()"
        [disabled]="saveInProgress"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-center">
      @if (justInstalled) {
      <button type="button" class="btn btn-primary" (click)="save()" [disabled]="saveInProgress || hasValidationErrors">
        {{ 'form.button_save' | translate }} @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
      } @if (!canConfigure) {
      <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="closeModal()">
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-end">
      @if (canConfigure && !justInstalled) { @if (configBlocks.length) {
      <button
        type="button"
        class="btn btn-primary"
        (click)="save()"
        [disabled]="saveInProgress || loading || hasValidationErrors"
      >
        @if (!saveInProgress) { {{ 'form.button_save' | translate }} } @if (saveInProgress) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
      } @if (!configBlocks.length) {
      <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="openPluginConfig()">
        {{ 'plugins.button_settings' | translate }}
      </button>
      } }
    </div>
  </div>
</div>
